<script setup>
import {onMounted, ref} from "vue";
import httpInstance from "@/http/index.js";
import Edit from "@/components/Edit.vue";

// const list = ref([
//   {
//     id: '11',
//     name: '31233',
//     city: '12323',
//     operation: '33123',
//   },
// ]);
// const getList = async () => {
//   //解构出里面的data
//   const {data} = await httpInstance.get('/vueTest/getList');
//   list.value = data;
// }
//
//
// //1.打开弹窗,获取子组件实例，调用方法或修改属性(下面Edit进行关联)
// const editRef = ref(null);
// const editItem = (row) => {
//   //父调用子组件暴露出来的方法
//   //2.回调数据(调用详情接口 / 当前行的静态数据)
//   editRef.value.open(row);
// }
//
//
// const deleteItem = (row) => {
//   alert('删除' + row.id);
// }
//
// onMounted(() => {
//   getList()
// })

</script>

<template>
  <!--  一级路由出口组件,RouterView会根据url去路由里面找到组件进行渲染-->
  <RouterView></RouterView>
  <!--  <el-table :data="list" style="width: 100%">-->
  <!--    <el-table-column prop="id" label="id" width="180"/>-->
  <!--    <el-table-column prop="name" label="姓名" width="180"/>-->
  <!--    <el-table-column prop="city" label="籍贯"/>-->
  <!--    <el-table-column label="操作" width="250">-->
  <!--      &lt;!&ndash;      在template里面写#default="{ row }",row.id就是list里面对象的id了&ndash;&gt;-->
  <!--      <template #default="{ row }">-->
  <!--        &lt;!&ndash;        点击连接下面的弹窗&ndash;&gt;-->
  <!--        <el-button type="primary" @click="editItem(row)">编辑</el-button>-->
  <!--        &lt;!&ndash;        点击调用删除方法&ndash;&gt;-->
  <!--        <el-button type="danger" @click="deleteItem(row)">删除</el-button>-->
  <!--      </template>-->
  <!--    </el-table-column>-->
  <!--  </el-table>-->

  <!--&lt;!&ndash;  @on-update定义事件，子组件会触发on-update,这时就会调用getList&ndash;&gt;-->
  <!--  <Edit ref="editRef" @on-update="getList"/>-->
</template>

<style scoped lang="scss">
header {
  line-height: 1.5;
  max-height: 100vh;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

nav {
  width: 100%;
  font-size: 12px;
  text-align: center;
  margin-top: 2rem;
}

nav a.router-link-exact-active {
  color: var(--color-text);
}

nav a.router-link-exact-active:hover {
  background-color: transparent;
}

nav a {
  display: inline-block;
  padding: 0 1rem;
  border-left: 1px solid var(--color-border);
}

nav a:first-of-type {
  border: 0;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }

  nav {
    text-align: left;
    margin-left: -1rem;
    font-size: 1rem;

    padding: 1rem 0;
    margin-top: 1rem;
  }
}
</style>

